import { Input as ArcoInput, Select, Checkbox, Radio, Switch, InputNumber, Slider, Popover, InputTag, Image } from "@arco-design/web-react";
import { pageRouters, fontOption } from "./data";
import { SketchPicker } from 'react-color'
const CheckboxGroup = Checkbox.Group;
const Option = Select.Option;
const RadioGroup = Radio.Group;
export function preventDefaultAndStop(e) {
  e.stopPropagation();
}

function getLabel(label) {
  if (label && typeof label === "object") {
    return label.zh_CN;
  } else {
    return label;
  }
}

function BaseCardVertical({ label, children }) {
  return <div className="flex items-center justify-between">
    <div className="text-sm">{getLabel(label)}</div>
    {children}
  </div>
}

function BaseCardHorizontal({ label, children }) {
  return <div className="">
    <div className="text-sm mb-2">{getLabel(label)}</div>
    {children}
  </div>
}

function BaseCard(props) {
  return (
    <div className="p-2" onClick={preventDefaultAndStop}>
      {props.layout === 'vertical' ? <BaseCardVertical {...props} /> : <BaseCardHorizontal {...props} />}
      {props.info && props.showBase ? <div className="temp-laebl">{getLabel(props.info)}</div> : ""}
    </div>
  );
}

function Header(props) {
  return <div className="p-2 text-sm font-bold">{getLabel(props.label)}</div>;
}
function Input(props) {
  return (
    <BaseCard {...props}>
      <ArcoInput value={props.default} onChange={props.onChange} placeholder={getLabel(props.placeholder)}></ArcoInput>
    </BaseCard>
  );
}

function fontInput(props) {
  return (
    <BaseCard {...props}>
      <Select style={{ minWidth: "150px" }} placeholder={props.placeholder} value={props.default.handle} allowClear onChange={props.onChange}>
        {fontOption.map((item, index) => (
          <Option key={index} value={item.handle} onClick={preventDefaultAndStop}>
            {getLabel(item.family)}
          </Option>
        ))}
      </Select>

    </BaseCard>
  );
}


function BlockSelect(props) {
  return (
    <BaseCard {...props}>
      <Select style={{ minWidth: "150px" }} placeholder={props.placeholder} value={props.default} allowClear onChange={props.onChange}>
        {props.option.map((item, index) => (
          <Option key={index} value={item.value} onClick={preventDefaultAndStop}>
            {getLabel(item.label)}
          </Option>
        ))}
      </Select>
    </BaseCard>
  );
}

function Nav(props) {
  const navMock = [
    { id: "", title: "无数据" },
    { id: "1", title: "测试数据" }
  ];
  return (
    <BaseCard {...props}>
      <Select
        placeholder={props.placeholder}
        onChange={(value) => {
          props.onChange(navMock.find((item) => item.id === value));
        }}
        style={{ minWidth: "150px" }}
        allowClear
        value={props.default.id}
      >
        {navMock.map((item, index) => (
          <Option key={index} value={item.id} onClick={preventDefaultAndStop}>
            {item.title}
          </Option>
        ))}
      </Select>
    </BaseCard>
  );
}

function BlockCheckbox(props) {
  return (
    <BaseCard {...props}>
      <CheckboxGroup value={props.default} onChange={props.onChange} options={props.option} style={{ display: "block", marginBottom: 16 }} />
    </BaseCard>
  );
}

function BlockRadio(props) {
  const option = props.option.map((item) => {
    item["label"] = getLabel(item.label) || item.icon || item.value;
    return item;
  });
  return (
    <BaseCard {...props}>
      <RadioGroup value={props.default} onChange={props.onChange} options={option} style={{ display: "block", marginBottom: 16 }} />
    </BaseCard>
  );
}

function BlockSwitch(props) {
  return (
    <BaseCard {...props} layout='vertical'>
      <Switch checked={Boolean(props.default) || false} onChange={props.onChange} />
    </BaseCard>
  );
}

function BlockInputNumber(props) {
  return (
    <BaseCard {...props}>
      <InputNumber value={Number(props.default) || 0} onChange={props.onChange} placeholder={props.placeholder || "请输入"}></InputNumber>
    </BaseCard>
  );
}

function BlockTextarea(props) {
  return (
    <BaseCard {...props}>
      {/* <textarea
        onChange={(e) => {
          props.onChange(e.target.value);
        }}
        value={props.default}
        placeholder={props.placeholder || "请输入"}
      ></textarea>
      Input.TextArea */}
    
      <ArcoInput.TextArea value={props.default} onChange={props.onChange} placeholder={getLabel(props.placeholder)}></ArcoInput.TextArea>

    </BaseCard>
  );
}

function BlockPageLink(props) {
  return (
    <BaseCard {...props}>
      <Select
        placeholder={props.placeholder || '选择链接'}
        defaultValue={Number(props.default.type) || ""}
        style={{ minWidth: "150px" }}
        allowClear
        onChange={(value) => {
          if (!value) {
            props.onChange({
              type: "",
              title: "",
              url: ""
            });
            return;
          }

          props.onChange(pageRouters.filter((item) => item.type === value)[0]);
        }}
      >
        {pageRouters.map((item, index) => (
          <Option key={index} value={item.type} onClick={preventDefaultAndStop}>
            {item.title}
          </Option>
        ))}
      </Select>
    </BaseCard>
  );
}

function BlockImage(props) {
  function handleImgChange(value) {
    props.onChange({
      src: value,
      alt: value
    });
  }



  function PopoverImage({ onClick }) {

    const images = [
      "https://cn01-cdn.staticsyy.com/uploads/41906/cart/resources/20230317/002401e67d567f50b98bd62ecc8825f4.jpg?x-oss-process=image/resize,m_lfit,w_3279",
      "https://cn01-cdn.staticsyy.com/uploads/28161/cart/resources/20221121/bfed7603da7a3b7334a1d9a0f231cce9.png?x-oss-process=image/resize,m_lfit,w_417",
      "https://cn01-cdn.staticsyy.com/uploads/41906/cart/resources/20230322/66c395c6348ab8b63ee0eb045950d9fd.jpg?x-oss-process=image/resize,m_lfit,w_800",
      "https://cn01-cdn.staticsyy.com/uploads/28161/cart/resources/20230301/5522c45d728009e64dcb45e55f7185c1.jpg?x-oss-process=image/resize,m_lfit,w_885"
    ]

    return <div className="grid gap-2 grid-cols-3">
      {images.map(url =>
        <img src={url} key={url} onClick={onClick.bind(null, url)} className="cursor-pointer h-12 w-12 object-contain bg-zinc-100" />
      )}
    </div>
  }
  return (
    <BaseCard {...props}>
      <Popover trigger='click'
        content={<PopoverImage onClick={handleImgChange} />}
        title='选择图片'>
        <div className="border border-solid h-20 cursor-pointer border-zinc-100 flex justify-center items-center">
          {props.default.src ? <img src={props.default.src} className="h-full w-auto" /> : <span>+</span>}
        </div>
      </Popover>
    </BaseCard>
  );
}

function BlockSlider(props) {
  return (
    <BaseCard {...props}>
      <Slider value={Number(props.default) || 0} min={props.min} max={props.max} step={1} onAfterChange={props.onChange} style={{ width: 200 }} />
    </BaseCard>
  );
}

function BlockInputTag(props) {
  return (
    <BaseCard {...props}>
      <InputTag allowClear value={props.default} placeholder={props.placeholder} style={{ maxWidth: 350, marginRight: 20 }} onChange={props.onChange} />
    </BaseCard>
  );
}

function BlockLayout(props) {
  function handleImgChange(key, value) {
    const copyDefault = JSON.parse(JSON.stringify(props.default));
    copyDefault[key] = value;
    props.onChange(copyDefault);
  }
  return (
    <BaseCard {...props}>
      <div className="column-align-items">
        <div className="align-items">
          <ArcoInput
            onChange={(value) => {
              handleImgChange("top", value);
            }}
            value={props.default.top}
            style={{ width: "150px" }}
            placeholder="请输入top"
          ></ArcoInput>
        </div>
        <div className="align-items" style={{ margin: "2px 0" }}>
          <ArcoInput
            onChange={(value) => {
              handleImgChange("left", value);
            }}
            value={props.default.left}
            style={{ width: "150px" }}
            placeholder="请输入left"
          ></ArcoInput>
          <span>:</span>
          <ArcoInput
            onChange={(value) => {
              handleImgChange("right", value);
            }}
            value={props.default.right}
            style={{ width: "150px" }}
            placeholder="请输入right"
          ></ArcoInput>
        </div>
        <div className="align-items">
          <ArcoInput
            onChange={(value) => {
              handleImgChange("bottom", value);
            }}
            value={props.default.bottom}
            style={{ width: "150px" }}
            placeholder="请输入bottom"
          ></ArcoInput>
        </div>
      </div>
    </BaseCard>
  );
}

function BlockColor(props) {

  function handleChangeComplete(color) {
    props.onChange(color.hex);
  }

  return <BaseCard {...props} layout='vertical'>
    <Popover trigger='click'
      content={<SketchPicker color={props.default}
        onChangeComplete={handleChangeComplete} />}
      title='颜色选择'>
      <div className="w-12 h-5 border border-solid border-zinc-200" style={{ backgroundColor: props.default }}>

      </div>
    </Popover>
  </BaseCard>
}


const AllComponents = {
  card_header: Header,
  card_input: Input,
  card_nav: Nav,
  card_select: BlockSelect,
  card_image: BlockImage,
  card_color: BlockColor,
  card_font: fontInput,
  card_checkbox: BlockCheckbox,
  card_radio: BlockRadio,
  card_switch: BlockSwitch,
  card_input_number: BlockInputNumber,
  card_textarea: BlockTextarea,
  card_text_editor: BlockTextarea,
  card_page_link: BlockPageLink,
  card_slider: BlockSlider,
  card_radio_tag: BlockRadio,
  card_tags: BlockInputTag,
  card_product_checkbox: BlockInputTag,
  card_layout: BlockLayout,
  card_coupon: Nav,
  card_blog: Nav,
  card_product: Nav,
  card_collection: Nav
}

export default function CreateComponents({ components, onChange }) {


  // function change(item,value){
  //   onChange(item,value)
  // }

  return <>
    {components.map((component, index) => {
      const Component = AllComponents[component.type];
      return <Component {...component} key={index} onChange={onChange.bind(null, component, index)} />
    })
    }
  </>
}
